<template>
  <div class="person_page">
    <div class="person wrap">
      <Crumb :navS="[{ name: '首页' }, { name: '个人中心' }]"></Crumb>
      <main>
        <aside>
          <div
            class="avatar"
            :style="{
              backgroundImage: `url(${userStore.userObject.userInfo.headImg})`,
            }"
          ></div>
          <div class="name">
            {{ userStore.userObject.userInfo.nickName }}
            <span @click="loginOutFn" style="cursor: pointer">[退出]</span>
          </div>
          <div class="title">
            <img src="@/assets/img/transaction.png" width="20" alt="交易管理" />
            交易管理
          </div>
          <ul class="list">
            <li :class="/\/person1/g.test(route.path) ? 'active' : ''">
              个人中心
            </li>
            <li :class="/\/person1/g.test(route.path) ? 'active' : ''">
              我的订单
            </li>
            <li :class="/\/cart/g.test(route.path) ? 'active' : ''">购物车</li>
            <li :class="/\/person1/g.test(route.path) ? 'active' : ''">
              消息通知
            </li>
            <li :class="/\/person1/g.test(route.path) ? 'active' : ''">
              积分明细
            </li>
            <li :class="/\/person1/g.test(route.path) ? 'active' : ''">
              积分攻略
            </li>
          </ul>
          <div class="title">
            <img src="@/assets/img/transaction.png" width="20" alt="交易管理" />
            个人信息管理
          </div>
          <ul class="list">
            <li>地址管理</li>
            <li>账号安全</li>
          </ul>
        </aside>
        <article>
          <!-- 二级路由 -->
          <router-view></router-view>
        </article>
      </main>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import Crumb from "@/components/Crumb.vue";
import { useUserStore } from "@/stores/user";
import { useLoginStore } from "@/stores/login";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const userStore = useUserStore();
const loginStore = useLoginStore();
const router = useRouter();
const route = useRoute();
//退出
const loginOutFn = () => {
  //清除token
  localStorage.removeItem("token");
  //清除仓库
  userStore.resetUser();
  //更新界面
  loginStore.ReMountedLogin();
  //提示
  ElMessage.success("退出成功");
};
</script>
<style lang="less" scoped>
// @import "../assets/css/public.less";
.person_page {
  background: #fff;
  main {
    border-top: 1px solid #e1e1e1;
    padding: 28px 0 48px;
    display: flex;
    justify-content: space-between;
    background: #fff;
    aside {
      width: 200px;
      height: 740px;
      background: #e7e7e7;
      margin-right: 60px;
      box-sizing: border-box;
      padding: 30px 18px 0;
      .avatar {
        width: 100px;
        height: 100px;
        margin: auto;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .name {
        text-align: center;
        margin-top: 19px;
        margin-bottom: 43px;
        span {
          text-decoration: underline;
          color: #2a5df1;
        }
      }
      .title {
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
        img {
          margin-right: 6px;
        }
      }
      .list {
        li {
          margin-bottom: 17px;
          font-weight: 300;
          color: #666666;
          cursor: pointer;
          &.active {
            // color: @base-color;
            color: #2a5df1;
            font-weight: bold;
            &::before {
              width: 2px;
              height: 14px;
              // background: @base-color;
              background-color: #2a5df1;
              display: inline-block;
              content: "";
              margin-right: 10px;
            }
          }
        }
      }
    }
    article {
      flex: 1;
      padding: 20px 0 0 0px;
      box-sizing: border-box;
      background: #fff;
    }
  }
}
</style>
